[Angular-1]初探Angular-1

發表於 更新於 分類於 ，

最近開始研究Angular1的框架，參考的是code school的Shaping up with angular.js，裡面的教學引導性超高，不排斥英文的人要學習Angular1的話非常推這個管道！他們還為這個教學做了主題曲XD。

第二個管道Angular的官方網站教學也做得不錯，但教材有點舊，而且他們也很推code shcool的教學。

p.s:Angular現在有出2，但玩法跟1差蠻多的而且還算在測試階段，有興趣的就去另外找資源哦！

基本認識

###Directive:
Angular特有的標籤，ng-app，ng-controller等等的標籤時常綁在html的DOM上面。

###Expression:
Angular特有的物件用法，所有的東西可以用雙括號{ { } }包住，例如直接在HTML輸入This is 10後，pring出來的訊息是This is 10。

簡單架設環境

用簡易的CDN帶入Angular套件和最常搭配的Boostrap樣式即可打簡單的code囉！

1
2
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

取之模組用之模組

Angular的世界通常是在JS檔案裡面自創模組後插入HTML的DOM裡面互動。

以下一個簡單的範例：

app.js
1
var app = angular.module("gemStore", []);

app.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>
    <h1>{{"Hello, Angular!"}}</h1>
  </body>
</html>

應該可以看到pring出簡單的Hello, Angular!

參考來源：Shaping up with angular.js